<template>
  <div class="login-page">
    <div class="header">
      <h1>智慧水厂管控一体化平台</h1>
    </div>
    <div class="card-bg">
      <div class="title">
        <div
          style="
            display: flex;
            align-items: center;
            height: 100%;
            border-bottom: 2px solid #3bb7fe;
            padding-bottom: 10px;
          "
        >
          <img alt="" src="./imgs/user.png" style="width: 30px; margin-right: 5px" />
          用户登录
        </div>
      </div>
      <a-form
        ref="formRef"
        :label-col="{ span: 0 }"
        :model="formModel"
        :wrapper-col="{ span: 24 }"
        style="width: 100%; padding: 40px 20px"
        @submit="confirm"
      >
        <a-form-item :rules="[{ required: true, message: '请输入用户名' }]" label="" name="username">
          <a-input v-model:value="formModel.username" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item :rules="[{ required: true, message: '请输入密码' }]" label="" name="password">
          <a-input-password
            v-model:value="formModel.password"
            placeholder="请输入密码"
            type="password"
          />
        </a-form-item>
        <a-form-item :rules="[{ required: true, message: '请输入验证码' }]" name="code">
          <div style="display: flex">
            <a-input v-model:value="formModel.code" placeholder="请输入验证码" />
            <img
              :src="`data:image/gif;base64,` + captchaData.img"
              class="login-code-img"
              style="
                width: 160px;
                height: 32px;
                background: #eee;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                font-weight: bold;
                color: #333;
                margin-left: 20px;
                border-radius: 10px;
              "
              @click="fetchCaptcha"
            />
          </div>
        </a-form-item>
        <a-form-item label="">
          <a-checkbox :checked="rememberMe">记住密码</a-checkbox>
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 0 }" style="margin-top: 40px">
          <a-button html-type="submit" style="width: 100%; background: #148bd0" type="primary"
          >登录
          </a-button>
        </a-form-item>
      </a-form>
      <!--    </a-card>-->
    </div>
    <div class="footer"></div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {removeAuthToken, saveAuthToken} from '@/plugins/axios'
import {useRoute, useRouter} from 'vue-router'
import { code, loginFun } from '@/api/base'
import Cookies from "js-cookie";
import {decrypt, encrypt} from "@/utils/CryptoJS";
import {setCookie} from "@/utils/base";
import { message } from 'ant-design-vue'
import router from '@/router'
const route = useRoute()
const redirect = ref(route.query && route.query.redirect)
const formRef = ref(null)
const captchaData = ref({
  img: '',
  uuid: ''
})
const expirationDate = new Date();
expirationDate.setMinutes(expirationDate.getMinutes() + 10);
const formModel = ref({
  username: '',
  password: '',
})
const rememberMe = ref(true)

const confirm = async (e) => {
  e.preventDefault()
  removeAuthToken()
  try {
    await formRef.value.validate()
  } catch ({errorFields}) {
    if (errorFields.length === 0) {
      const response = await loginFun({ ...formModel.value,uuid:captchaData.value.uuid })
      if (response.code === 200) {
        // 登录成功 保存token
        saveAuthToken(response.token, rememberMe.value)
        // 保存用户名密码 10个小时
        setCookie('username', encrypt(formModel.value.username).toString())
        setCookie('password', encrypt(formModel.value.password).toString())
        setCookie('rememberMe', rememberMe.value,)
        // router.push('/')
        router.push({path: redirect.value || "/"}).catch(() => {
        });
      } else {
        await fetchCaptcha()
      }
    }
  }
}
const fetchCaptcha = async () => {
  const response = await code()
  console.log(response)
  captchaData.value = response
}
onMounted(() => {
  fetchCaptcha()
  if (Cookies.get('rememberMe') === 'true') {
    formModel.value.username = decrypt(Cookies.get('username'))
    formModel.value.password = decrypt(Cookies.get('password'))
    rememberMe.value = true
    console.log(rememberMe.value)
  }
})
</script>

<style lang="scss" scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  //background-image: url('@/assets/images/home-bg.png');
  background-size: 100% 100%;
}

.header {
  position: absolute;
  z-index: var(--common-header-z-index);
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  background-image: url('@/components/CommonHeader/imgs/bg.svg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  user-select: none;
  font-weight: 400;
  color: #ffffff;
  font-family: 'YouSheBiaoTiHei';
  text-align: center;
  line-height: 72px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.16);
  margin-bottom: 0;
  h1{
    font-size: 40px;
    background: linear-gradient(to top, rgb(73, 194, 255), rgb(168, 255, 255));
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: 2px;
  }
}

.card-bg {
  background: rgba(59, 183, 254, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  width: 402px;
  height: 450px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 38px 15px;

  .title {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(59, 183, 254, 0.15);
    align-items: center;
    font-size: 18px;
    color: #ffffff;
    width: 100%;
  }
}

.ant-form-item {
  ::v-deep(.ant-form-item-control-input) {
    .ant-input {
      background-color: rgba(255, 255, 255, 0.2);
      outline: none;
      border-color: #3bb7fe;
    }
    .ant-input-password {
      background-color: rgba(255, 255, 255, 0.2);
      border-color: #3bb7fe;
      outline: none;

      .ant-input {
        background-color: rgba(255, 255, 255, 0);
      }
    }
  }
}

.home-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 293px;
  height: 100%;
  padding: 20px 0;
  pointer-events: none;
  z-index: 1;
}

.home-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 293px;
  height: 100%;
  padding: 20px 0;
  pointer-events: none;
  z-index: 1;
}

.footer {
  //background-image: url('@/assets/images/footer.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 1291px;
  height: 80px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -645.5px;
  pointer-events: none;
}

.ant-checkbox .ant-checkbox-inner {
  background: #fff;
}
</style>
